<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>本地websocket测试</title>
    <meta name="robots" content="all"/>
    <meta name="keywords" content="本地,websocket,测试工具"/>
    <meta name="description" content="本地,websocket,测试工具"/>
    <style>
        .btn-group {
            display: inline-block;
        }
    </style>
</head>
<body>
<label for='wsAddr'>后端地址：</label>
<input type='text' value='ws://localhost:8085/websocket/1' class="form-control" style='width:390px;display:inline'
       id='wsAddr'/>
<div class="btn-group">
    <button type="button" class="btn btn-default" onclick='addSocket();'>连接</button>
    <button type="button" class="btn btn-default" onclick='closeSocket();'>断开</button>
    <button type="button" class="btn btn-default" onclick='document.getElementById("output").innerHTML=""'>清空</button>
</div>
<div class="row">
    <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
    <label for='message'>待发信息：</label>
    <input type="text" id='message' class="form-control" style='width:810px' placeholder="待发信息"/>
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" onclick="doSend();">发送</button>
	</span>
</div>
</body>
<script type="text/javascript">
    function formatDate(now) {
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        return year + "-" + (month < 10 ? ("0" + month) : month) + "-" + (date < 10 ? ("0" + date) : date) +
            " " + (hour < 10 ? ("0" + hour) : hour) + ":" + (minute < 10 ? ("0" + minute) : minute) + ":" + (
                second < 10 ? ("0" + second) : second);
    }

    let websocket;

    function addSocket() {
        const wsAddr = document.getElementById('wsAddr').value;
        if (wsAddr === '') {
            alert("请填写websocket的地址");
            return false;
        }
        StartWebSocket(wsAddr);
    }

    function closeSocket() {
        websocket.close();
    }

    function StartWebSocket(wsUri) {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function (evt) {
            onOpen(evt)
        };
        websocket.onclose = function (evt) {
            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            onMessage(evt)
        };
        websocket.onerror = function (evt) {
            onError(evt)
        };
        console.log(websocket);
    }

    function onOpen(evt) {
        console.log(evt)
        writeToScreen("<span style='color:red'>连接成功，现在你可以发送信息啦！！！</span>");
    }

    function onClose(evt) {
        console.log(evt)
        writeToScreen("<span style='color:red'>websocket连接已断开!!!</span>");
        websocket.close();
    }

    function onMessage(evt) {
        console.log(evt)
        writeToScreen('<span style="color:blue">服务端回应&nbsp;' + formatDate(new Date()) + '</span><br/><span class="bubble">' +
            evt.data + '</span>');
    }

    function onError(evt) {
        console.log(evt)
        writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
    }

    function doSend() {
        const obj = document.getElementById("message")
        const message = obj.value;
        if (message === '') {
            alert("请先填写发送信息");
            obj.focus();
            return false;
        }
        if (typeof websocket === "undefined") {
            alert("websocket还没有连接，或者连接失败，请检测");
            return false;
        }
        if (websocket.readyState === 3) {
            alert("websocket已经关闭，请重新连接");
            return false;
        }
        console.log(websocket);
        obj.value = '';
        writeToScreen('<span style="color:green">你发送的信息&nbsp;' + formatDate(new Date()) + '</span><br/>' + message);
        websocket.send(message);
    }

    function writeToScreen(message) {
        const div = "<div class='newmessage'>" + message + "</div>";
        const output = document.getElementById("output");
        const doScroll = output.scrollTop === output.scrollHeight - output.clientHeight;
        output.innerHTML += div;
        if (doScroll) {
            output.scrollTop = output.scrollHeight - output.clientHeight;
        }
    }
</script>
</html>